import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
// 导入rem适配插件
import 'lib-flexible/flexible.js'

// 导入字体图标
import './assets/font_2292008_uhjiyyfv3l/iconfont.css'
// 引入样式重置
import './assets/reset.css'

// 配置axios插件 
import axios from 'axios'
// 第一种方式
// Vue.prototype.$axios = axios;
// 第二种方式
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)

// 安装并使用animate.css 插件
// npm install animate.css@3.7.2 --save
// import 'animate.css'
import animated from 'animate.css'
Vue.use(animated)


// vue render函数的讲解
Vue.component("myList", {
  render: function (h) {
    return h('div', {
      class: { //添加class
        foo: true,
        bar: true
      },
      style: {
        color: 'red',
        fontSize: "20px"
      },
      attr: {
        id: "box",
        title: "hello"
      },
      props: {
        mm: 'nihao'
      },
      on: {
        click: function () {
          alert(1)
        }
      }
    }, [//子节点
      h('h1', { class: { kk: true }, on: { click: function () { alert(1) } } }, [h('span', "你好")]),
      h('h1', '后天不放假')
    ])
  },
  data () {
    return {}
  }
})


// Vue的全局的配置Vue.config
//取消 Vue 所有的日志与警告。
Vue.config.silent = true
//配置是否允许 vue-devtools 检查代码。开发版本默认为 true，生产版本默认为 false。生产版本设为 true 可以启用检查。
// 务必在加载 Vue 之后，立即同步设置以下内容
Vue.config.devtools = true
//禁用生产提示----------------------
Vue.config.productionTip = false
// 打开vue组件的性能测试
Vue.config.performance = true
// vue 路由的全局钩子函数
// 路由拦截器  可以对页面跳转进行监控
// 路由跳转前的监听函数
// router.beforeEach((to, from, next) => {
//   // to   即将进入的组件
//   // to.path  路径 to.name 路由名称 to.query to.params 跳转传递的参数
//   // to.meta 路由配置  to.hash 路径的hash值
//   if (to.name == "my") {//去到个人中心 需要已登录   
//     if (!localStorage.token) { //拦截条件
//       console.log(11111)
//       // router.back() //回退一步  组件 中调用this.$router.back()
//       // router.go(0)          //-1 后退一步 1前进一步  this.$router.go()
//       // router.forward()      //前进一步   this.$router.forward()
//       next("/login")
//     }
//   }
//   // from.path  路径 from.name 路由名称 from.query from.params 跳转传递的参数
//   // from.meta 路由配置  from.hash 路径的hash值
//   if (from.name == "cart") {
//     alert("你已经离开购物车组件")
//   }
//   console.log(to)
//   console.log(from)
//   // from 即将离开组件
//   next()//继续执行跳转
// })
// 如何做权限控制
//vue 项目使用路由拦截器进行权限控制 
// 对相应的权限码 进行判断拦截




//路由跳转后的监听函数
// router.afterEach((to, from) => {
//   console.log(to)
//   if (to.name == "fenlei") {
//     if (localStorage.token) {
//       alert("已经登录")
//     }
//   }
//   console.log(from)
// })

// 根实例
// 将一个模板字符串编译成 render 函数。只在完整版时可用。
// var res = Vue.compile('<div><span>{{ gdata }}</span></div>');
//创建一个可响应的对象数据 可用在渲染和计算属性
//可作为最小限度的跨组件数据
var count = Vue.observable({ count: 1 })
console.log(count)
var vm = new Vue({
  router,
  store,
  data () {
    return {
      gdata: "根实例的数据",
      obj: {},
      mynum: count
    }
  },
  render: h => h(App),
  // render: res.render
}).$mount("#app");
console.log(vm)
// Vue.version 获取vue的版本
console.log(Vue.version) //2.6.12  
// vm.$el-- - 根元素
// vm.$data--数据
// vm.$watch(vm.obj)  监控数据
// vm.$set(vm.obj, "age", "88")
// vm.$mount()  挂载方法
// vm.$destroy()  销毁组件
// this.$slots.插槽名  获取所有插槽
// console.log(vm.$slots.toubu)
// vue实例是否运行于服务器
console.log(vm.$isServer)
// vm.$attrs 获取属性

